<template>
    <div>
      <van-form @submit="onSubmit">
        <van-field name="dropData" label="货物名称">
          <template #input>
            <van-dropdown-menu style="width:4rem;">
              <van-dropdown-item v-model="goodsname" :options="dropData" />
            </van-dropdown-menu>
          </template>
        </van-field>
        <van-field
          v-model="goodsprice"
          name="商品价格"
          label="商品价格"
          placeholder="商品价格"
          :rules="[{ required: true, message: '请填写商品价格' }]"
        />
        <van-field name="stepper" label="数量">
          <template #input>
            <van-stepper v-model="stepper" />
          </template>
        </van-field>
        <van-field
          v-model="totalprice"
          name="总价"
          label="总价"
          readonly
        />
        <van-field
          readonly
          clickable
          name="calendar"
          :value="datetime"
          label="进货日期"
          placeholder="点击选择日期"
          @click="showCalendar = true"
        />
        <van-calendar :min-date="minDate" v-model="showCalendar" @confirm="onConfirm" />
        <van-field name="uploader" label="图片上传">
          <template #input>
            <van-uploader :max-count="1"  v-model="uploader" />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
</template>

<script>
  import {getDropData, submitFormData} from "@/api/requestData";
  import axios from 'axios';
    export default {
        name: "discripe",
        data(){
          return{
            minDate : new Date(2010, 0, 1),
            goodsprice :'',
            dropData : [],
            stepper : 1,
            uploader: [],
            goodsname: 1,
            datetime: '',
            showCalendar: false,
          }
        },
        methods:{
          getDropDatas(){
            getDropData().then(res => {
              if (res.status === 200) {
                res.data.data.forEach(item => {
                  this.dropData.push({
                    value : item.id,
                    text : item.name
                  })
                })
              }
            })
          },

          onSubmit(values){
            console.log('values', values)
            let form = new FormData();
            // form.append('name',this.goodsname);
            form.append('images',this.uploader[0].file);
            // form.append('price',this.goodsprice);
            axios({
              url : 'http://192.168.1.4:3000/submitForm',
              method : 'post',
              headers:{
                'enctype': 'multipart/form-data'
              },
              data : form
            }).then(res => {
              console.log('res22222222222', res)
            })
            // submitFormData(form).then(res => {
            //   console.log(111)
            // })
          },
          onConfirm(date) {
            this.datetime = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
          },
      },
        computed:{
          totalprice:{
            get: function () {
              return this.goodsprice * this.stepper
            },
            set: function (newVal) {

            }
          }
        },
        created(){
          this.getDropDatas();
      }
    }
</script>

<style scoped>

</style>
